<template>
  <div class="grendfather">
    <h1>祖先(Grendfather)</h1>
    <h2>{{$store.state.grData}}</h2>
    <Button @click="add">+</Button>
    <Button @click="cut">-</Button>
    <div class="box">
      <Father :fun="fun()" :open="open" :end="end"></Father>
      <Uncle :fun="fun()"></Uncle>
    </div>
     <Button @click="endTimer">vuex结束</Button>
  </div>
</template>

<script>
import Father from './mind-vue/father.vue';
import Uncle from './mind-vue/uncle.vue';
export default {
  name: "MindVuex",
  components: { Father, Uncle },
  data(){
    return {
      sum:[]
    }
  },
  methods: {
    add() {      
      this.$store.commit('add')
    },
    cut() {
      this.$store.commit('cut')
    },
    // 开启定时器
    open(){
      this.abc = setInterval(function (params) {
        console.log(111);
      },1000)
    },
    end(){
      clearInterval(this.abc)
    },
    endTimer(){
      console.log('vuex结束');
      this.$store.commit('endTimer')
    },
    fun(){
      const temp = this.sum
      return function (ele){
        temp.push(ele)
        console.log(temp);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.grendfather {
  border: 3px solid DimGray;
  .box {
    display: flex;
  }
}
</style>
